<script setup>
import { ref, computed } from 'vue'
import AppHeader from '../components/AppHeader.vue'
import LeftSidebar from '../components/LeftSidebar.vue'
import AppFooter from '../components/AppFooter.vue'

const searchUser = ref('')

// 状态数字与文字映射
const caseStatusMap = {
  0: '待审核',
  1: '审核通过',
  2: '审核未通过',
  3: '已结案',
  4: '已撤回'
}

// 根据数字返回文字
function getCaseStatusText(status) {
  return caseStatusMap[status] || '未知状态'
}

function statusLabel(status) {
  const map = {
    0: '待审核',
    1: '审核通过',
    2: '审核未通过',
    3: '已结案',
    4: '已撤回'
  }
  return map[status] || status
}
</script>

<template>
  <div class="holy-grail-container">
    <!-- 顶部横幅 -->
    <AppHeader 
      :search-user="searchUser"
      @update:search-user="searchUser = $event"
    />

    <!-- 圣杯布局主体 -->
    <div class="holy-grail-main">
      <!-- 左侧导航栏 -->
      <LeftSidebar />

      <!-- 主内容区 -->
        <router-view />

      <!-- 右侧边栏 -->
      <!-- <RightSidebar /> -->
    </div>

    <!-- 底部 -->
    <AppFooter />
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #app {
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.holy-grail-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f8fa;
}
.holy-grail-main {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  height: calc(100vh - 64px - 60px);
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sidebar-left, .sidebar-right, .main-content {
  min-height: 0;
  min-width: 0;
}
@media (max-width: 992px) {
  .holy-grail-main {
  flex-direction: column;
    height: auto;
  }
}
</style> 